<template>
	<view class="container">
		
		<view class="headerBox flex fs_28" v-if="!isShowImg && !canvasShow">
			<view @tap="bindRevoke">撤销</view>
			<view @tap="bindCreatImage">生成图片</view>
		</view>
		<view class="creatImage" v-if="canvasShow">
			<canvas v-if="canvasShow" canvas-id="creatImage" :style="'width:'+editAera.width+'px;height:'+editAera.height+'px;'"></canvas>
		</view>
		<view class="pageEditBox" @click.stop="bindRemoveItem" v-if="!isShowImg && !canvasShow">
			<view class="pageEdit">
				<!-- <view class="itemEditBox" v-for="(item,index) in editList" :key="index" :style="{width:item.width + 'px',left:item.left + 'px',top:item.top + 'px','z-index': item.zIndex}" @click.stop="bindChooseItem" @touchstart.stop="item.active ? bindItemStartMove($event,index) : ''" @touchmove.stop="item.active ? bindItemMove($event,index) : ''" :class="item.active ? 'active' : ''" :data-index="index" :data-active="item.active"> -->
				<view class="itemEditBox" v-for="(item,index) in editList" :key="index" :style="{width:item.width + 'px',left:item.left + 'px',top:item.top + 'px','z-index': item.zIndex}" @click.stop="bindChooseItem(index)" @touchstart="bindItemStartMove($event,index)" @touchmove="bindItemMove($event,index)" :class="item.active ? 'active' : ''" @touchend="bindItemEnd($event,index)">
					
					<view class="itemEdit" :style="{width:item.width+ 'px'}" >
						<view class="editClose" v-if="item.active" @click.stop="bindModalObj('确定要移除该组件吗','取消','确定',1,index)">x</view>
						<view class="editIamgeArrow" v-if="item.active && item.type === 0" @touchstart.stop="bindEditIamgeStart($event,index)" @touchmove.stop="bindEditIamgeMove($event,index)" @touchend.stop="bindEditIamgeEnd($event,index)">
							<!-- <text>↖</text><text>↘</text> -->
						</view>
						<view class="imageBox" :style="{width:item.width+ 'px',height:item.height+ 'px'}" v-if="item.type === 0">
							<image :src="item.text" mode="" class="" :style="{width:item.width+ 'px',height:item.height+ 'px'}"  ></image>
						</view>
						
						
						<view class="editWordArrow" v-if="item.active && item.type === 1" @touchstart.stop="bindEditTextStart($event,index)" @touchmove.stop="bindEditTextMove($event,index)" @touchend.stop="bindEditTextEnd($event,index)">
							<!-- <text>←</text><text>→</text> -->
						</view>
						<view class="editWordText" v-if="item.type === 1" :style="{width:item.width+ 'px','font-size':item.fontSize + 'px',color:item.color,'text-align':item.textAlign}">{{item.text}}</view>
					</view>
				</view>

			</view>
		
		</view>
		
		<view class="footerBox" v-if="!isShowImg">
			<view class="footer" v-if="bottomType === 0">
				<view class="" @click="bindModalObj('input','取消','确定',0)">
					加文字
				</view>
				<view class="" @click="addImages">
					加图片
				</view>
			</view>
			<view class="footer" v-if="bottomType === 1">
				<view class="" @click="bindModalObj('input','取消','确定',3)">
					编辑
				</view>
				<view class="" @click="bindStyle()">
					样式
				</view>
			</view>
			<view class="footer" v-if="bottomType === 2">
				<view class="" @click="bindChangeImage">
					换图
				</view>
				<view class="" @click="changeImageCropper">
					裁剪
				</view>
			</view>
			<view class="wordEditBox" v-if="bottomType === 3">
				<scroll-view class="">
					<view class="colorBox flex">
						<view class="colorItem" :class="color.active ? 'colorActive' : ''" v-for="(color,index) in colorArr" :key="index" :style="{background: color.color}" @tap="bindChooseWordColor(index)"></view>
					</view>
				</scroll-view>
				<view class="styleBox flex">
					<view class="fontSizeBox flex">
						<view class="btnReduce" @tap="bindSizeReduce">-</view>
						<view class="">{{styleFont}}</view>
						<view class="btnAdd" @tap="bindSizeAdd">+</view>
					</view>
					<view class="textAlginBox flex">
						<view class="" @tap="bindTextAlgin" data-align="left">靠左</view>
						<view class="" @tap="bindTextAlgin" data-align="center">居中</view>
						<view class="" @tap="bindTextAlgin" data-align="right">靠右</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<view class="cu-modal" :class="modalObj.type !== '' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="dialogContent text_center fs_28 color_333333 modalText" v-if="modalObj.text !== 'input' && modalObj.text !== 'template'">
						{{modalObj.text}}
					</view>
					
					<view class="dialogContent" v-if="modalObj.text === 'input'">
						<input type="text" value="" placeholder="请输入" v-model="wordText" />
					</view>
					<view class="dialogContent" v-if="modalObj.text === 'template'">
						
						<view class="uploadAreaBox">
							<view class="flex areaItem">
								<view class="areaRight flex content_items" >
									<view class="" v-if="plainImage == ''" @click="updateImg()">
										<image src="/static/sahngxuan@2x.png" mode=""></image>
										<view class="uploadText">
											上传图片
										</view>
									</view>
									<view class="" v-if="plainImage != ''" @click="updateImg()">
										<image class="img" :src="plainImage"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
		
				<view class="cu-bar bg-white justify-end">
					<view class="cu-bar-left" @click="bindCloseModal" v-if="modalObj.type !== 2 && modalObj.cancelText !== ''">{{modalObj.cancelText}}</view>
					<view class="cu-bar-right" :class="modalObj.type === 2 || modalObj.cancelText === ''? 'btnSubmit' : ''" @click="bindSubmitModal">{{modalObj.confirmText}}</view>
				</view>
			</view>
		</view>
		
		<!-- 裁剪 -->
		<view class="cropper-body" v-if="isShowImg">
			<view class='cropper-content'>
				<view class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px'">
					<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
						<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
						<!-- <view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
						    :style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'"> -->
						<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
							    :style="{width: cutW + 'px',height: cutH + 'px',left:cutL+'px',top:cutT+'px'}">
							<view class="uni-cropper-view-box">
								<view class="uni-cropper-dashed-h"></view>
								<view class="uni-cropper-dashed-v"></view>
								<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
								<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
								<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
								<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='cropper-config'>
				<scroll-view scroll-x>
					<view class="cropperSizeBox flex">
						<view :class="size.active ? 'cSize'+ (index + 1) + ' sizeActive' : 'cSize'+ (index + 1)" @tap="bindChooseCroppperSize" data-type="free" v-for="(size,index) in croppperSizeArr" :key="index" :data-index="index">{{size.text}}</view>
					</view>
				</scroll-view>
				<view class="cropperBtnBox flex">
					<view class="croBtnClose" @tap="bindCloseCropper">x</view>
					<view class="croTitle">图片裁剪</view>
					<view class="croBtnComplte" @tap="bindCropperComplte">√</view>
				</view>
				<!-- <button type="primary reverse" @click="getImage" style='margin-top: 30upx;'> 选择图片 </button>
				<button type="warn" @click="getImageInfo" style='margin-top: 30upx;'> 点击生成图片 </button> -->
			</view>
			<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
		</view>
		<!-- <page-foot :name="name"></page-foot> -->
	</view>
</template>
<!-- https://blog.csdn.net/Charles_Tian/article/details/80910616 -->
<!-- wx.canvasToTempFilePath -->
<!-- uni.canvasToTempFilePath -->
<script>
	 /*
    wx.canvasToTempFilePath(OBJECT, this)
    x	          Number	  否	画布x轴起点（默认0）	
    y	          Number	  否	画布y轴起点（默认0）	
    width	  Number	  否	画布宽度（默认为canvas宽度-x）
    height	  Number	  否	画布高度（默认为canvas高度-y）
    destWidth	  Number	  否	输出图片宽度（默认为 width * 屏幕像素密度）
    destHeight	  Number	  否	输出图片高度（默认为 height * 屏幕像素密度）	
    canvasId	  String	  是	画布标识，传入 <canvas/> 的 canvas-id
    fileType	  String	  否	目标文件的类型，只支持 'jpg' 或 'png'。默认为 'png'	
    quality	  Number	  否	图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理	
    success	  Function	  否	接口调用成功的回调函数
    fail	  Function	  否	接口调用失败的回调函数
    complete	  Function	  否	接口调用结束的回调函数（调用成功、失败都会执行）
	*/
	let sysInfo = uni.getSystemInfoSync();
	// console.log(sysInfo)
	let SCREEN_WIDTH = sysInfo.screenWidth
	let SCREEN_HEGIHT = sysInfo.screenHeight - 125
	let PAGE_X, // 手按下的x位置
		PAGE_Y, // 手按下y的位置 
		PR = sysInfo.pixelRatio, // dpi
		T_PAGE_X, // 手移动的时候x的位置
		T_PAGE_Y, // 手移动的时候Y的位置
		CUT_L, // 初始化拖拽元素的left值
		CUT_T, // 初始化拖拽元素的top值
		CUT_R, // 初始化拖拽元素的
		CUT_B, // 初始化拖拽元素的
		CUT_W, // 初始化拖拽元素的宽度
		CUT_H, //  初始化拖拽元素的高度
		IMG_RATIO, // 图片比例
		IMG_REAL_W, // 图片实际的宽度
		IMG_REAL_H, // 图片实际的高度
		DRAFG_MOVE_RATIO = 1, //移动时候的比例,
		INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
		DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
	export default {
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				imageSrc: '/static/bg.jpg',
				isShowImg: false,
				canvasShow: false,
				// 初始化的宽高
				cropperInitW: SCREEN_WIDTH,
				cropperInitH: SCREEN_HEGIHT,
				// 动态的宽高
				cropperW: SCREEN_WIDTH,
				cropperH: SCREEN_WIDTH,
				// 动态的left top值
				cropperL: 0,
				cropperT: 0,
				transL: 0,
				transT: 0,
				// 图片缩放值
				scaleP: 0,
				imageW: 0,
				imageH: 0,
				// 裁剪框 宽高
				cutW: 0,
				cutH: 0,
				cutL: 0,
				cutT: 0,
				cutB: SCREEN_WIDTH,
				cutR: '100%',
				qualityWidth: DRAW_IMAGE_W,
				innerAspectRadio: DRAFG_MOVE_RATIO,
				//0 图片，1 文字
				editList:[
					{
						text: '/static/bg.jpg',
						width: 650 / 2,
						height: 1040 / 2,
						left: 0,
						top:0,
						'zIndex': 0,
						active: false,
						type: 0,
						'fontSize': 28,
						color: '#fff',
						textAlign: 'left',
					},
					{
						text: '/static/logo.png',
						width: 200 / 2,
						height: 200 / 2,
						left: 245 / 2,
						top: 30 / 2,
						'zIndex': 1,
						active: false,
						type: 0,
						'fontSize': 16,
						color: '#fff',
						textAlign: 'left',
					},
					{
						text: '编辑器',
						width: 200 / 2,
						height: '100%',
						left: 245 / 2,
						top: 600 / 2,
						'zIndex': 2,
						active: false,
						type: 1,
						'fontSize': 22,
						color: '#fff',
						textAlign: 'center',
					},
				],
				copyList: [],
				chooseIndex: 0,
				modalObj:{
					text: '',
					cancelText: '',
					confirmText: '',
					type: '',//0加文字1移除组件2成功
				},
				
				itemStartpageX: 0,
				itemStartpageY: 0,
				iamgeStartPageX: 0,
				iamgeStartPageY: 0,
				textStartPageX: 0,
				textStartPageY: 0,
				
				wordText: '',
				editAera:{
					width:0,
					height: 0
				},
				bottomType: 0,
				colorArr:[
					{
						color: 'red',
						active:false,
					},
					{
						color: '#fff',
						active:false,
					},
					{
						color: '#000',
						active:false,
					},
					{
						color: 'green',
						active:false,
					},
					{
						color: 'yellow',
						active:false,
					},
					{
						color: 'blue',
						active:false,
					},
					{
						color: '#666',
						active:false,
					},
				],
				styleFont: 28,
				croppperSizeArr: [
					{
						text: '自由',
						type: 'free',
						active: false,
					},
					{
						text: '固定',
						type: 'fixed',
						active: true,
					},
					{
						text: '1:1',
						type: '1_1',
						active: false,
					},
					{
						text: '2:3',
						type: '2_3',
						active: false,
					},
				],
				actionArr: [],//编辑动作记录 action 0:添加1：修改2：删除
				isClick: true,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady(){
			let info = uni.createSelectorQuery().select(".pageEdit");
			info.boundingClientRect((data) => {
				if(data){
					this.editAera = {
						width: data.width,
						height: data.height
					}
					this.editList[0].width = data.width
					this.editList[0].height = data.height
					this.copyList = JSON.parse(JSON.stringify(this.editList))
				}
		　　}).exec()
			// this.loadImage();
			
		},
		methods: {
			setData(obj) {
				let that = this;
				Object.keys(obj).forEach(function (key) {
					that.$set(that.$data, key, obj[key])
				});
			},
			//点击Item选中事件
			bindChooseItem(index){
				this.chooseIndex = index
				let editItem =  this.editList[index]
				if(!editItem.active){
					this.editList.map((item,i) => {
						this.editList[i].active = false
					})
				}
				this.editList[index].active = !editItem.active
				if(this.editList[index].active && editItem.type === 1){
					this.wordText = editItem.text
					this.bottomType = 1
					this.styleFont = this.editList[index].fontSize
					return
				}
				if(this.editList[index].active && editItem.type === 0){
					this.wordText = ''
					this.bottomType = 2
				}else{
					this.bottomType = 0
					this.wordText = ''
				}
				this.isClick = true
			},
			//点击移除Item选中事件
			bindRemoveItem(){
				this.editList.map((item,i) => {
					this.editList[i].active = false
				})
				this.bottomType = 0
				this.wordText = ''
				this.isClick = true
			},
			addWord(){
				
			},
			//Item拖动touchStart事件
			bindItemStartMove(e,index){
				if(!this.editList[index].active){
					return
				}
				this.itemStartpageX = e.touches[0].pageX 
				this.itemStartpageY = e.touches[0].pageY
				this.isClick = false
			},
			//Item 拖动touchMove事件
			bindItemMove(e,index){
				if(!this.editList[index].active){
					return
				}
				let moveX = this.itemStartpageX - e.touches[0].pageX
				let moveY = this.itemStartpageY - e.touches[0].pageY
				//左移
				if(moveX > 0){
					this.editList[index].left = this.editList[index].left - moveX
				}
				else{
					this.editList[index].left = this.editList[index].left - moveX
				}
				//上移
				if(moveY > 0){
					this.editList[index].top = this.editList[index].top - moveY
				}else{
					this.editList[index].top = this.editList[index].top - moveY
				}
				this.itemStartpageX = e.touches[0].pageX
				this.itemStartpageY = e.touches[0].pageY
				this.isClick = false
			},
			//Item 拖动touchEnd事件
			bindItemEnd(e,index){
				if(!this.editList[index].active){
					return
				}
				this.changeRevokeArr(index,1,1)
				
			},
			//image 拖动touchStart事件
			bindEditIamgeStart(e){
				this.iamgeStartPageX = e.touches[0].pageX
				this.iamgeStartPageY = e.touches[0].pageY
			},
			//image 拖动touchMove事件
			bindEditIamgeMove(e,index){
				let moveX = this.iamgeStartPageX - e.touches[0].pageX
				let moveY = this.iamgeStartPageY - e.touches[0].pageY
				//左上移
				if(moveX > 0 && moveY > 0){
					this.editList[index].width = this.editList[index].width - moveX
					this.editList[index].height = this.editList[index].height - moveY
				}
				//右下移
				if(moveX < 0 && moveY < 0){
					this.editList[index].width = this.editList[index].width - moveX
					this.editList[index].height = this.editList[index].height - moveY
				}
				this.iamgeStartPageX = e.touches[0].pageX
				this.iamgeStartPageY = e.touches[0].pageY
			},
			//image 拖动touchEnd事件
			bindEditIamgeEnd(e,index){
				this.changeRevokeArr(index,1,1)
			},
			// textStartPageX: 0,
			// textStartPageY: 0,
			//text 拖动touchStart事件
			bindEditTextStart(e){
				this.textStartPageX = e.touches[0].pageX
				this.textStartPageY = e.touches[0].pageY
			},
			//text 拖动touchMove事件
			bindEditTextMove(e,index){
				let moveX = this.textStartPageX - e.touches[0].pageX
				let moveY = this.textStartPageY - e.touches[0].pageY
				//左移
				if(moveX != 0){
					this.editList[index].width = this.editList[index].width - moveX
				}
				
				this.textStartPageX = e.touches[0].pageX
				this.textStartPageY = e.touches[0].pageY
			},
			//text 拖动touchEnd事件
			bindEditTextEnd(e,index){
				this.changeRevokeArr(index,1,1)
			},
			// 拖动时候触发的touchStart事件
			contentStartMove(e) {
				PAGE_X = e.touches[0].pageX
				PAGE_Y = e.touches[0].pageY
			},
			// 拖动时候触发的touchMove事件
			contentMoveing(e) {
				var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
				var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
				// 左移
				if (dragLengthX > 0) {
					if(e.touches[0].pageX < this.cropperL){
						this.cutL = this.cutL - dragLengthX
					}
				} else {
					if(e.touches[0].pageX < this.cropperL){
						this.cutL = this.cutL - dragLengthX
					}
				}
				//上移
				if (dragLengthY > 0) {
					if(e.touches[0].pageY < this.cropperT){
						this.cutT = this.cutT - dragLengthY
					}
				} else {
					if(e.touches[0].pageY < this.cropperT){
						this.cutT = this.cutT - dragLengthY
					}
				}
				
				// if (dragLengthX > 0) {
				// 	if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
				// } else {
				// 	if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
				// }
				// if (dragLengthY > 0) {
				// 	if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
				// } else {
				// 	if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
				// }
				// this.setData({
				// 	cutL: this.cutL - dragLengthX,
				// 	cutT: this.cutT - dragLengthY,
				// 	cutR: this.cutR + dragLengthX,
				// 	cutB: this.cutB + dragLengthY
				// })
				PAGE_X = e.touches[0].pageX
				PAGE_Y = e.touches[0].pageY
			},
			contentTouchEnd() {
			},
			//加图片
			addImages(){
				uni.chooseImage({
					success: (res) => {
						this.loadAddImage(res);
					},
				})
			},
			//缩放要加的图片显示
			loadAddImage(query){
				let imagePath = query.tempFilePaths[0]
				uni.getImageInfo({
					src: imagePath,
					success: (res) => {
						console.log(res)
						let imageRatio = res.width / res.height,
							imageW = 0,
							imageH = 0
						let editAeraW = this.editAera.width,
							editAeraH = this.editAera.height
						//横 || 正方
						if (imageRatio >= 1) {
							imageW = editAeraW
							imageH = editAeraW / imageRatio
						} else {
							//竖
							imageW = editAeraH * imageRatio
							imageH = editAeraH
						}
						let editLength = this.editList.length,zIndex = this.editList[editLength - 1].zIndex
						this.editList.push({
							text: imagePath,
							width: imageW,
							height: imageH,
							left: editAeraW - imageW,
							top: editAeraH - imageH,
							'zIndex': zIndex + 1,
							active: true,
							type: 0,
							'fontSize': '28upx',
							color: '#fff',
							textAlign: 'left',
						})
						this.copyList.push({
							text: imagePath,
							width: imageW,
							height: imageH,
							left: editAeraW - imageW,
							top: editAeraH - imageH,
							'zIndex': zIndex + 1,
							active: true,
							type: 0,
							'fontSize': '28upx',
							color: '#fff',
							textAlign: 'left',
						})
						this.bottomType = 2
						this.chooseIndex = this.editList.length - 1
						this.changeRevokeArr(this.chooseIndex,2,0)
					}
				})
			},
			//换图片
			bindChangeImage(){
				uni.chooseImage({
					success: (res) => {
						this.changeRevokeArr(this.chooseIndex,1,0)
						let imagePath = res.tempFilePaths[0]
						this.editList[this.chooseIndex].text = imagePath
						this.copyList[this.chooseIndex].text = imagePath
					},
				})
			},
			//换图里的截图
			changeImageCropper(){
				let chooseIndex = this.chooseIndex, chooseItem = this.editList[chooseIndex]
				uni.showLoading({
					title: '图片加载中...',
				})
				if(chooseItem.active &&  chooseItem.type === 0){
					this.imageSrc = this.copyList[chooseIndex].text
					// this.imageSrc = chooseItem.text
					console.log(this.imageSrc)
				}
				uni.getImageInfo({
					src: this.imageSrc,
					success: (res) => {
						console.log(res)
						IMG_RATIO = res.width / res.height
						if (IMG_RATIO >= 1) {
							IMG_REAL_W = SCREEN_WIDTH
							IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
						} else {
							IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
							IMG_REAL_H = SCREEN_WIDTH
						}
						let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
						INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
						// 根据图片的宽高显示不同的效果   保证图片可以正常显示
						if (IMG_RATIO >= 1) {
							let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2);
							let cutB = cutT;
							let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
							let cutR = cutL;
							let cutW = chooseItem.width,
								cutH = chooseItem.height
							this.setData({
								cropperW: SCREEN_WIDTH,
								cropperH: SCREEN_WIDTH / IMG_RATIO,
								// 初始化left right
								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
								cropperT: Math.ceil((SCREEN_HEGIHT - IMG_REAL_H) / 2),
								cutW:cutW / IMG_RATIO,
								cutH: cutH / IMG_RATIO,
								cutL: cutL,
								cutT: cutT,
								cutR: cutR,
								cutB: cutB,
								// 图片缩放值
								imageW: IMG_REAL_W,
								imageH: IMG_REAL_H,
								scaleP: IMG_REAL_W / SCREEN_WIDTH,
								qualityWidth: DRAW_IMAGE_W,
								innerAspectRadio: IMG_RATIO
							})
						} else {
							let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2);
							let cutR = cutL;
							let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2);
							let cutB = cutT;
							let cutW = chooseItem.width,
								cutH = chooseItem.height
							this.setData({
								cropperW: SCREEN_WIDTH * IMG_RATIO,
								cropperH: SCREEN_WIDTH,
								// 初始化left right
								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
								cropperT: Math.ceil((SCREEN_HEGIHT - IMG_REAL_H) / 2),
								cutW:cutW * IMG_RATIO,
								cutH: cutH * IMG_RATIO,
								cutL: cutL,
								cutT: cutT,
								cutR: cutR,
								cutB: cutB,
								// 图片缩放值
								imageW: IMG_REAL_W,
								imageH: IMG_REAL_H,
								scaleP: IMG_REAL_W / SCREEN_WIDTH,
								qualityWidth: DRAW_IMAGE_W,
								innerAspectRadio: IMG_RATIO
							})
						}
						this.setData({
							isShowImg: true
						})
						uni.hideLoading()
						this.changeRevokeArr(this.chooseIndex,1,1)
					},
					fail: (e) => {
						console.log(e)
						uni.hideLoading()
					}
				})
			},
			//选择裁剪比例
			bindChooseCroppperSize(e){
				let type = e.currentTarget.dataset.type,
					index = e.currentTarget.dataset.index
				this.croppperSizeArr.map( (item,i) => {
					this.croppperSizeArr[i].active = false
				})
				this.croppperSizeArr[index].active = true
				switch (type){
					case 'free':
						
						break;
					case 'fiexd':
						
						break;
					case '1_1':
						
						break;
					case '2_3':
						
						break;
					default:
						break;
				}
			},
			//关闭裁剪
			bindCloseCropper(){
				this.isShowImg = false
			},
			//完成裁剪
			bindCropperComplte(){
				this.getImageInfo()
			},
			//弹窗事件
			bindModalObj(text,cancelText,confirmText,type,index){
				this.modalObj = {
					text,cancelText,confirmText,type
				}
				if(index){
					this.modalObj.index = index
				}
				if(type === 0){
					
				}
				if(type === 1){
					
				}
			},
			//关闭弹窗事件
			bindCloseModal(){
				this.modalObj.type = ''
			},
			//确认弹窗事件
			bindSubmitModal(){
				let type = this.modalObj.type
				//加文字
				if(type === 0){
					if(this.wordText){
						let editLength = this.editList.length,zIndex = this.editList[editLength - 1].zIndex
						this.editList.push({
							text: this.wordText,
							width: 400 / 2,
							height: '100%',
							left: 145 / 2,
							top: 400 / 2,
							'zIndex': zIndex + 1,
							active: true,
							type: 1,
							'fontSize': 14,
							color: '#fff',
							textAlign: 'center',
						})
						this.copyList.push({
							text: this.wordText,
							width: 400  / 2,
							height: '100%',
							left: 145 / 2,
							top: 400 / 2,
							'zIndex': zIndex + 1,
							active: true,
							type: 1,
							'fontSize': 14,
							color: '#fff',
							textAlign: 'center',
						})
						this.bottomType = 1
						this.chooseIndex = this.editList.length - 1
						this.changeRevokeArr(this.chooseIndex,this.bottomType,0)
					}
					this.bindCloseModal()
				}
				//移除组件
				if(type === 1){
					this.changeRevokeArr(this.modalObj.index,0,2)
					this.editList.splice(this.modalObj.index,1)
					this.copyList.splice(this.modalObj.index,1)
					this.bindCloseModal()
					// this.editList[this.modalObj.index]
				}
				//编辑文字
				if(type === 3){
					if(this.wordText){
						this.editList[this.chooseIndex].text = this.wordText;
						this.changeRevokeArr(this.chooseIndex,1,1)
					}
					this.bindCloseModal()
				}
			},
			//样式事件
			bindStyle(){
				this.bottomType = 3
			},
			//选择文字颜色
			bindChooseWordColor(i){
				this.colorArr.map( (item,index) => {
					this.colorArr[index].active = false
				})
				this.editList[this.chooseIndex].color = this.colorArr[i].color
				this.colorArr[i].active = true
				this.changeRevokeArr(this.chooseIndex,1,1)
			},
			//减字体大小事件
			bindSizeReduce(){
				let sFont = this.styleFont
				if(sFont > 14){
					this.styleFont = sFont - 2
					this.editList[this.chooseIndex].fontSize = this.styleFont
					this.changeRevokeArr(this.chooseIndex,1,1)
				}
			},
			//加字体大小事件
			bindSizeAdd(){
				let sFont = this.styleFont
				if(sFont < 96){
					this.styleFont = sFont + 2
					this.editList[this.chooseIndex].fontSize = this.styleFont
					this.changeRevokeArr(this.chooseIndex,1,1)
				}
			},
			//文字对齐方式事件
			bindTextAlgin(e){
				let align = e.currentTarget.dataset.align
				switch (align){
					case 'left':
						this.editList[this.chooseIndex].textAlign = 'left'
						this.changeRevokeArr(this.chooseIndex,1,1)
						break;
					case 'center':
						this.editList[this.chooseIndex].textAlign = 'center'
						this.changeRevokeArr(this.chooseIndex,1,1)
						break;
					case 'right':
						this.editList[this.chooseIndex].textAlign = 'right'
						this.changeRevokeArr(this.chooseIndex,1,1)
						break;
					default:
						break;
				}
			},
			getImage() {
				uni.chooseImage({
					success: function (res) {
						this.setData({
							imageSrc: res.tempFilePaths[0],
						})
						this.loadImage();
					},
				})
			},
			loadImage() {
				var _this = this
				let chooseIndex = this.chooseIndex, chooseItem = this.editList[chooseIndex]
				uni.showLoading({
					title: '图片加载中...',
				})
				if(chooseItem.active &&  chooseItem.type === 0){
					this.imageSrc = this.copyList[chooseIndex].text
				}
				uni.getImageInfo({
					src: _this.imageSrc,
					success: function success(res) {
						IMG_RATIO = res.width / res.height
						if (IMG_RATIO >= 1) {
							IMG_REAL_W = SCREEN_WIDTH
							IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
						} else {
							IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
							IMG_REAL_H = SCREEN_WIDTH
						}
						let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
						INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
						// 根据图片的宽高显示不同的效果   保证图片可以正常显示
						if (IMG_RATIO >= 1) {
							let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2);
							let cutB = cutT;
							let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
							let cutR = cutL;
							_this.setData({
								cropperW: SCREEN_WIDTH,
								cropperH: SCREEN_WIDTH / IMG_RATIO,
								// 初始化left right
								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
								cropperT: Math.ceil((SCREEN_HEGIHT - IMG_REAL_H) / 2),
								cutL: cutL,
								cutT: cutT,
								cutR: cutR,
								cutB: cutB,
								// 图片缩放值
								imageW: IMG_REAL_W,
								imageH: IMG_REAL_H,
								scaleP: IMG_REAL_W / SCREEN_WIDTH,
								qualityWidth: DRAW_IMAGE_W,
								innerAspectRadio: IMG_RATIO
							})
						} else {
							let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2);
							let cutR = cutL;
							let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2);
							let cutB = cutT;
							_this.setData({
								cropperW: SCREEN_WIDTH * IMG_RATIO,
								cropperH: SCREEN_WIDTH,
								// 初始化left right
								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
								cropperT: Math.ceil((SCREEN_HEGIHT - IMG_REAL_H) / 2),
								cutL: cutL,
								cutT: cutT,
								cutR: cutR,
								cutB: cutB,
								// 图片缩放值
								imageW: IMG_REAL_W,
								imageH: IMG_REAL_H,
								scaleP: IMG_REAL_W / SCREEN_WIDTH,
								qualityWidth: DRAW_IMAGE_W,
								innerAspectRadio: IMG_RATIO
							})
						}
						_this.setData({
							isShowImg: true
						})
						uni.hideLoading()
					}
				})
			},
			
			// 获取图片
			getImageInfo() {
				var _this = this;
				this.modalObj.type = ''
				uni.showLoading({
					title: '图片生成中...',
				});
				// 将图片写入画布
				const ctx = uni.createCanvasContext('myCanvas');
				ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
				ctx.draw(true, () => {
					// 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)    canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / PR)
					var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;
					var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;
					var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;
					var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;
					console.log(canvasT)
					uni.canvasToTempFilePath({
						x: canvasL,
						y: canvasT,
						width: canvasW,
						height: canvasH,
						destWidth: canvasW,
						destHeight: canvasH,
						quality: 0.5,
						canvasId: 'myCanvas',
						success: (res) => {
							uni.hideLoading()
							// 成功获得地址的地方
							this.editList[this.chooseIndex].text = res.tempFilePath
							this.editList[this.chooseIndex].width = canvasW / this.innerAspectRadio
							this.editList[this.chooseIndex].height = canvasH / this.innerAspectRadio
							this.isShowImg = false
							this.modalObj.type = ''
							// uni.previewImage({
							// 	current: '', // 当前显示图片的http链接
							// 	urls: [res.tempFilePath] // 需要预览的图片http链接列表
							// })
						}
					});
				});
			},
			// 设置大小的时候触发的touchStart事件
			dragStart(e) {
				T_PAGE_X = e.touches[0].pageX
				T_PAGE_Y = e.touches[0].pageY
				CUT_L = this.cutL
				CUT_R = this.cutR
				CUT_B = this.cutB
				CUT_T = this.cutT
			},
			// 设置大小的时候触发的touchMove事件
			dragMove(e) {
				var _this = this
				var dragType = e.target.dataset.drag
				switch (dragType) {
					case 'right':
						var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						if (CUT_R + dragLength < 0) dragLength = -CUT_R
						this.setData({
							cutR: CUT_R + dragLength
						})
						break;
					case 'left':
						var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						if (CUT_L - dragLength < 0) dragLength = CUT_L
						if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
						this.setData({
							cutL: CUT_L - dragLength
						})
						break;
					case 'top':
						var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_T - dragLength < 0) dragLength = CUT_T
						if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
						this.setData({
							cutT: CUT_T - dragLength
						})
						break;
					case 'bottom':
						var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_B + dragLength < 0) dragLength = -CUT_B
						this.setData({
							cutB: CUT_B + dragLength
						})
						break;
					case 'rightBottom':
						var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
						if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
						let cutB = CUT_B + dragLengthY;
						let cutR = CUT_R + dragLengthX;
						this.setData({
							cutB: cutB,
							cutR: cutR
						})
						break;
					default:
						break;
				}
			},
			//Promise封装
			promisify(api){
				return (options, ...params) => {
					return new Promise((resolve, reject) => {
						const extras = {
							success: resolve,
							fail: reject
						}
						api({ ...options, ...extras }, ...params)
					})
				}
			},
			//撤销数组封装
			changeRevokeArr(chooseIndex,bottomType,action){
				console.log('changeRevokeArr')
				this.actionArr.push({
					obj: {...this.editList[chooseIndex]},
					bottomType,
					action,
				})
				// console.log('this.actionArr',this.actionArr)
			},
			//撤销事件 action 0:添加1：修改2：删除
			bindRevoke(){
				let actionList  = this.actionArr,
					aLength = actionList.length 
				if(aLength > 0){
					let actionType = actionList[aLength - 1].action
					// this.editList.splice(this.modalObj.index,1)
					// this.copyList.splice(this.modalObj.index,1)
					// 添加
					if(actionType === 0){
						this.editList.push(actionList[aLength - 1].obj)
						this.copyList.push(actionList[aLength - 1].obj)
						this.actionArr.splice(aLength - 1,1)
					}
					// 修改
					if(actionType === 1){
						this.actionArr.splice(aLength - 1,1)
						let spliceAction = this.actionArr,spliceLength = spliceAction.length
						if(spliceAction.length === 0){
							this.editList = this.copyList
							this.bottomType = 0
							return
						}
						//editList修改
						this.editList.map( (item, index) => {
							if(spliceAction[spliceLength - 1].obj.zIndex === item.zIndex){
								this.editList[index] = {
									...spliceAction[spliceLength - 1].obj
								}
								this.bottomType = spliceAction[spliceLength - 1].bottomType
							}
						})
					}
					// 删除
					if(actionType === 2){
						this.editList.push(actionList[aLength - 1].obj)
						this.copyList.push(actionList[aLength - 1].obj)
						console.log('actionList[aLength - 1].obj',actionList[aLength - 1].obj)
						this.actionArr.splice(aLength - 1,1)
					}
					
				}else{
					uni.showToast({
						title: '已经撤销到初始状态',
						icon: 'none',
						duration: 3000,
					})
				}
			},
			//生成图片事件
			bindCreatImage(){
				// const wxGetImageInfo = this.promisify(uni.getImageInfo)
				uni.showLoading({
					title: '正在生成'
				});
				const ctx = uni.createCanvasContext('creatImage')
				// console.log(ctx)
				// drawImage(img,x,y,width,height)
				// fillText(text,x,y,maxWidth)
				this.editList.map( (item,index) => {
					let type = item.type
					if(type === 0){
						ctx.drawImage(item.text, item.left, item.top, item.width, item.height)
					}
					if(type === 1){
						ctx.setTextAlign(item.textAlign) // 文字
						ctx.setFillStyle(item.color) // 文字颜色
						ctx.setFontSize(item.fontSize) // 文字字号
						ctx.fillText(item.text, item.left + item.width / 2, item.top)
					}
				})
				ctx.stroke()
				// 绘图生成临时图片
				ctx.draw(false,() => {
					this.tempFileImage()
				})
				this.canvasShow = true
				return
				let imageArr = [],textArr = []
				this.editList.map( (item,index) =>{
					let type = item.type
					if(type === 0){
						console.log(wxGetImageInfo)
						imageArr.push(
							wxGetImageInfo({
								src: item.text
							})
						)
						
					}
				} )
				Promise.all([
					...imageArr
					// wxGetImageInfo({
					// 	
					// }),
				]).then(res => {
					// drawImage(img,x,y,width,height)
					// fillText(text,x,y,maxWidth)
					const ctx = uni.createCanvasContext('creatImage')
					console.log(ctx)
					// 底图
					this.editList.map( (item,index) => {
						let type = item.type
						if(type === 0){
							ctx.drawImage(res[index].path, item.left, item.top, item.width, item.height)
						}
						if(type === 1){
							ctx.setTextAlign(Item.textAlign)    // 文字居中
							ctx.setFillStyle(item.color)  // 文字颜色：黑色
							ctx.setFontSize(item.fontSize)         // 文字字号：22px
							ctx.fillText(item.text, item.left, item.top)
						}
					})
					ctx.stroke()
					// 绘图生成临时图片
					console.log('res', res)
					ctx.draw(false,() => {
						this.tempFileImage()
					})
					this.canvasShow = true
				})
			},
			// editAera.width
			tempFileImage() {
				uni.canvasToTempFilePath({
					canvasId: 'creatImage',
					success: (res) => {
						uni.hideLoading()
						this.savePic(res.tempFilePath)
					},
					fail:() => {
						//TODO
					}
				})
			},
			//保存
			savePic (filePath) {
				console.log('filePath', filePath)
				uni.showLoading({
					title: '正在保存'
				});
				uni.saveImageToPhotosAlbum({
					filePath: filePath,
					success: () => {
						uni.showToast({
							title: '图片保存成功～'
						});
					},
					fail: (e) => {
						//TODO
					},
					complete: () => {
						uni.hideLoading()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		-webkit-text-size-adjust:none;
		background: #eee;
	}
	.shadow_e2e2e2{
		box-shadow:-2upx 2upx 2upx 2upx #e2e2e2;
	}
	.text_center{
		text-align: center;
	}
	.fs_28{
		font-size: 28upx;
	}
	.color_333333{
		color: #333333
	}
	.text_ff3333{
		color: #ff3333;
	}
	.text_3366ff{
		color: #3366ff;
	}
	.text_be00ae{
		color: #be00ae;
	}
	.cu-bar-right{
		color: #cc33cc;
	}
	.btnSubmit{
		width: 100%;
	}
	.container{
		background: #eee;
		.creatImage{
			padding: 20upx 50upx;
		}
		.headerBox{
			width: 100%;
			height: 40upx;
			line-height: 40upx;
			view{
				width: 30%;
				margin: auto 10%;
				text-align: center;
			}
		}
	}
	.modalText{
		width: 100%;
	}
	.pageEditBox{
		padding: 20upx 50upx;
		.pageEdit{
			position: relative;
			height: 1040upx;
			overflow: hidden;
			background: #fff;
			.active{
				border: 2px solid #3366ff !important;
			}
			.itemEditBox{
				border: 2px solid rgba(0,0,0,0);
				position: absolute;
				// overflow: hidden;
				.itemEdit{
					position: relative;
					.imageBox{
						overflow: hidden;
					}
					.editWordText{
						overflow: hidden;
						word-wrap: break-word;
					}
					.editIamgeArrow{
						position: absolute;
						right: -20upx;
						bottom: -20upx;
						width: 40upx;
						height: 40upx;
						line-height: 32upx;
						// border-radius: 50%;
						background: #3366ff;
						color: #fff;
						text-align: center;
						z-index: 2;
						
					}
					.editWordArrow{
						position: absolute;
						right: -20upx;
						top: -20upx;
						width: 40upx;
						height: 40upx;
						line-height: 32upx;
						font-size: 12upx;
						// border-radius: 50%;
						background: #3366ff;
						color: #fff;
						text-align: center;
						z-index: 2;
						
						
					}
					.editClose{
						position: absolute;
						left: -20upx;
						top: -20upx;
						width: 40upx;
						height: 40upx;
						line-height: 32upx;
						font-size: 32upx;
						border-radius: 50%;
						background: #3366ff;
						color: #fff;
						text-align: center;
						z-index: 2;
					}
				}
			}
			
		}
		
	}
	
	.footerBox{
		width: 100%;
		height: 100upx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		background: #fff;
		.footer{
			display: flex;
			view{
				flex: 1;
				text-align: center;
				line-height: 100upx;
				font-size: 30upx;
				color: #666;
			}
		}
		.wordEditBox{
			.colorBox{
				height: 42upx;
				.colorItem{
					width: 38upx;
					height: 38upx;
					border: 1px solid rgba(0,0,0,0);
				}
				.colorActive{
					border-color: #fff;
				}
			}
		}
		.styleBox{
			margin: 10upx 30upx auto 30upx;
			.fontSizeBox,.textAlginBox{
				flex: 1;
				view{
					flex: 1;
					text-align: center;
					font-size: 28upx;
					color: #333333;
				}
				.btnReduce,.btnAdd{
					line-height: 40upx;
					font-size: 48upx;
				}
			}
		}
	}
	
	.dialogContent{
		width: 100%;
		margin: auto 30upx;
		input{
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			text-align: left;
		}
	}
	
	.cropper-body{
		.cropper-config {
			padding: 15upx 40upx 0 40upx;
			background: #fff;
			.cropperSizeBox{
				view{
					font-size: 22upx;
					text-align: center;
					margin-right: 30upx;
					border: 1px solid #333;
					&:nth-last-child(1){
						margin-right: 0upx;
					}
				}
				.cSize1,.cSize2,.cSize3{
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
				}
				.cSize4{
					width: 40upx;
					height: 60upx;
					line-height: 60upx;
				}
				.sizeActive{
					border: 1px solid blue;
					color: blue;
				}
			}
			.cropperBtnBox{
				padding-top: 10upx;
				.croBtnClose,.croBtnComplte{
					width: 60upx;
					height: 60upx;
					line-height: 60upx;
					font-size: 48upx;
					text-align: center;
				}
				.croTitle{
					flex: 1;
					text-align: center;
					font-size: 28upx;
					line-height: 72upx;
				}
			}
		}
		.cropper-content {
			min-height: 750upx;
			width: 100%;
		}
		.uni-corpper {
			position: relative;
			overflow: hidden;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-tap-highlight-color: transparent;
			-webkit-touch-callout: none;
			box-sizing: border-box;
		}
		.uni-corpper-content {
			position: relative;
		}
		.uni-corpper-content image {
			display: block;
			width: 100%;
			min-width: 0 !important;
			max-width: none !important;
			height: 100%;
			min-height: 0 !important;
			max-height: none !important;
			image-orientation: 0deg !important;
			margin: 0 auto;
		}
		/* 移动图片效果 */
		.uni-cropper-drag-box {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			cursor: move;
			background: rgba(0, 0, 0, 0.6);
			z-index: 1;
		}
		/* 内部的信息 */
		.uni-corpper-crop-box {
			position: absolute;
			background: rgba(255, 255, 255, 0.3);
			z-index: 2;
		}
		.uni-corpper-crop-box .uni-cropper-view-box {
			position: relative;
			display: block;
			width: 100%;
			height: 100%;
			overflow: visible;
			outline: 1upx solid #69f;
			outline-color: rgba(102, 153, 255, .75)
		}
		/* 横向虚线 */
		.uni-cropper-dashed-h {
			position: absolute;
			top: 33.33333333%;
			left: 0;
			width: 100%;
			height: 33.33333333%;
			border-top: 1upx dashed rgba(255, 255, 255, 0.5);
			border-bottom: 1upx dashed rgba(255, 255, 255, 0.5);
		}
		/* 纵向虚线 */
		.uni-cropper-dashed-v {
			position: absolute;
			left: 33.33333333%;
			top: 0;
			width: 33.33333333%;
			height: 100%;
			border-left: 1upx dashed rgba(255, 255, 255, 0.5);
			border-right: 1upx dashed rgba(255, 255, 255, 0.5);
		}
		/* 四个方向的线  为了之后的拖动事件*/
		.uni-cropper-line-t {
			position: absolute;
			display: block;
			width: 100%;
			background-color: #69f;
			top: 0;
			left: 0;
			height: 1upx;
			opacity: 0.1;
			cursor: n-resize;
		}
		.uni-cropper-line-t::before {
			content: '';
			position: absolute;
			top: 50%;
			right: 0upx;
			width: 100%;
			-webkit-transform: translate3d(0, -50%, 0);
			transform: translate3d(0, -50%, 0);
			bottom: 0;
			height: 41upx;
			background: transparent;
			z-index: 11;
		}
		.uni-cropper-line-r {
			position: absolute;
			display: block;
			background-color: #69f;
			top: 0;
			right: 0upx;
			width: 1upx;
			opacity: 0.1;
			height: 100%;
			cursor: e-resize;
		}
		.uni-cropper-line-r::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 41upx;
			-webkit-transform: translate3d(-50%, 0, 0);
			transform: translate3d(-50%, 0, 0);
			bottom: 0;
			height: 100%;
			background: transparent;
			z-index: 11;
		}
		.uni-cropper-line-b {
			position: absolute;
			display: block;
			width: 100%;
			background-color: #69f;
			bottom: 0;
			left: 0;
			height: 1upx;
			opacity: 0.1;
			cursor: s-resize;
		}
		.uni-cropper-line-b::before {
			content: '';
			position: absolute;
			top: 50%;
			right: 0upx;
			width: 100%;
			-webkit-transform: translate3d(0, -50%, 0);
			transform: translate3d(0, -50%, 0);
			bottom: 0;
			height: 41upx;
			background: transparent;
			z-index: 11;
		}
		.uni-cropper-line-l {
			position: absolute;
			display: block;
			background-color: #69f;
			top: 0;
			left: 0;
			width: 1upx;
			opacity: 0.1;
			height: 100%;
			cursor: w-resize;
		}
		.uni-cropper-line-l::before {
			content: '';
			position: absolute;
			top: 0;
			left: 50%;
			width: 41upx;
			-webkit-transform: translate3d(-50%, 0, 0);
			transform: translate3d(-50%, 0, 0);
			bottom: 0;
			height: 100%;
			background: transparent;
			z-index: 11;
		}
		.uni-cropper-point {
			width: 5upx;
			height: 5upx;
			background-color: #69f;
			opacity: .75;
			position: absolute;
			z-index: 3;
		}
		.point-t {
			top: -3upx;
			left: 50%;
			margin-left: -3upx;
			cursor: n-resize;
		}
		.point-tr {
			top: -3upx;
			left: 100%;
			margin-left: -3upx;
			cursor: n-resize;
		}
		.point-r {
			top: 50%;
			left: 100%;
			margin-left: -3upx;
			margin-top: -3upx;
			cursor: n-resize;
		}
		.point-rb {
			left: 100%;
			top: 100%;
			-webkit-transform: translate3d(-50%, -50%, 0);
			transform: translate3d(-50%, -50%, 0);
			cursor: n-resize;
			width: 36upx;
			height: 36upx;
			background-color: #69f;
			position: absolute;
			z-index: 1112;
			opacity: 1;
		}
		.point-b {
			left: 50%;
			top: 100%;
			margin-left: -3upx;
			margin-top: -3upx;
			cursor: n-resize;
		}
		.point-bl {
			left: 0%;
			top: 100%;
			margin-left: -3upx;
			margin-top: -3upx;
			cursor: n-resize;
		}
		.point-l {
			left: 0%;
			top: 50%;
			margin-left: -3upx;
			margin-top: -3upx;
			cursor: n-resize;
		}
		.point-lt {
			left: 0%;
			top: 0%;
			margin-left: -3upx;
			margin-top: -3upx;
			cursor: n-resize;
		}
		/* 裁剪框预览内容 */
		.uni-cropper-viewer {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		.uni-cropper-viewer image {
			position: absolute;
			z-index: 2;
		}
	}
	
</style>